<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<ul>
	<li v-for="item in items">
		<!-- <a v-for="(x,y) in item">{{y}}:{{x}} </a> -->
		 <a v-for="(value,keyname,index) in item">{{keyname}}:{{value}} </a>
		
		</li>
	</ul>
		<a>学号：</a><input v-model="id" /></br>
		<a>班级：</a><input v-model="classname" /></br>
		<a>姓名：</a><input v-model="name" /></br>
		<button @click="add()">添加</button>
	
</div>
</head>
<body>
<script>
new Vue({
	el:"#app",//#-查找id=app的元素
	data:{
		//i:"",
		id:"",
		classname:"",
		name:"",
		items:[
			
			{id:202001,classname:"移动1901",name:"张三"},
			{id:202002,classname:"移动1901",name:"李四"},
			{id:202003,classname:"移动1901",name:"王五"},
		]
		
	},
	methods:{
		add:function(){
			//alert(this.i)
			var student={};
			//判断
			//如果id不为空 classname不为空 name不为空
			 if(this.id!=""&&this.classname!=""&&this.name!=""){
				//那么 id=自己写的id classname=自己写的 name=自己写的
				student.id=this.id;
				student.classname=this.classname;
				student.name=this.name;

				this.items.push(student);//然后再把自己写的 东西 添加进去
				
			}else{
				alert("不能为空呀")
			}
			
		},
	}
	
})

</script>
</body>
</html>
